<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery-ui-1.8.16.custom.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery.multiselect.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery.multiselect.filter.css" type="text/css" />
	<title>產品編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/custom.validate.methods.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.metadata.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselect.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselect.filter.min.js"></script>
	<script type="text/javascript">

	var $book;
	$(function() {
		$("#mainForm").validate({
			meta: "validate",
			messages:{
				'vo.product_id':{
					required:"請輸入產品代碼",
				},
				'vo.product_type':{
					required:"請選擇產品形態",
				},
				'vo.book_id':{
					required:"",
				}
			},
			submitHandler: function(form) {
				var op = $("input[name='op']").val();
				if(op == 'insert'){
					var product_id =$("#product_id").val();
					$.post(
					    "${ctx}/ajaxValidateProductId.do?i="+Math.random(),
					    {product_id:product_id}, 
						function(data){
					    	if(data == "OK"){ 
					    		document.mainForm.submit();
					    	}else{
						    	var product_id = $("#product_id");
						    	$(product_id).addClass("error");
						    	$(product_id).parent().append('<label for="vo.product_id" generated="true" class="error">'+data+'</label>');
					    	}
						} 
				    );
					    
				}else{
					document.mainForm.submit();
				}
			}
		});
				
		// Area update
		$('td input[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('td select[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		// $('td input[name="vo.id"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="key" />');
		//$('td input[name="vo.product_id"]').attr('disabled', 'disabled');
		
		if('update'=='<bean:write name="lazyForm" property="op"/>'){
			$("#product_id").attr("readonly","readonly");
		}
		
		var checkAllText = "全選";
		var uncheckAllText="取消";
		var noneSelectedText = "請選擇書籍";
		var selectedText = "已選  #";
		var label ='查找:';
		var placeholder = '請輸入關鍵字';
		
		$book  = $("#book_id").multiselect({
			multiple: false,
			selectedList: 1,
			minWidth:200,
			checkAllText: checkAllText,
			uncheckAllText:uncheckAllText,
			noneSelectedText:noneSelectedText,
			selectedText: selectedText,
			position: { 
				my: 'center', 
				at: 'bottom'
			}
		}).multiselectfilter({
			label: '',
			//width:120,
			placeholder: placeholder
	    });
		
		<logic:equal value="delete" name="lazyForm" property="op">
			$book.multiselect('disable');
		</logic:equal>
		
		if('delete' != '<bean:write name="lazyForm" property="op"/>' ){
			$("#product_type").change(function(){
				var value = $("#product_type").val();
				$("#book_id").val("");
				$("#book_id option").remove();
				if(value){
					if(value=="1"){
						$.post(
						    "${ctx}/ajaxGetBooks.do?i="+Math.random(),
						    {},
						    function(data){
						    	dealAjaxData(data);						    	
						    },
						    'json'
					    );
					}else{
						$.post(
						    "${ctx}/ajaxGetSubscriptions.do?i="+Math.random(),
						    {},
						    function(data){
						    	dealAjaxData(data);						    	
						    },
						    'json'
					    );
					}
				}else{					
					$book.multiselect('refresh');
				}				
			});
		}
		
		
	});
	
	function dealAjaxData(data){		
		if(data && data.length){			
			$(data).each(function(i){				
				var option = $("<option/>");
				$(option).attr("value",data[i].id);
				$(option).text(data[i].name);
				$("#book_id").append(option);
			});
    	}
		$book.multiselect('refresh');
	}
	</script>
</head>
<body>
<form id='mainForm' name='mainForm' action='<c:out value="${ctx}"/>/saveProductID2Book.do' method="post">
	<html:hidden property="op" name="lazyForm"/>
	<div id="DataArea">
	<table width="100%" border="0">
		<tr>
			<th class="th" colspan="2" ><bean:write property="op" name="lazyForm"/> </th>
		</tr>
		<tr>
			<td class="title">產品代碼</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true}}"  styleId="product_id" name="lazyForm" property="vo.product_id" size="50" />
			</td>
		</tr>		
		<tr>
			<td class="title">產品型態</td>
			<td class="one">
			 <html:select styleId="product_type" styleClass="{validate:{required:true}}" property="vo.product_type" name="lazyForm" style="width:200px;">
	            <html:option value=""></html:option>     
	   			<html:option value="1">單本圖書</html:option>
	   			<html:option value="2">訂閱圖書</html:option>    			
	     	  </html:select>			
			</td>
		</tr>
		<tr>
			<td class="title">選擇書籍</td>
			<td class="one">
			<html:select styleClass="{validate:{required:true}}" styleId="book_id" property="vo.book_id" name="lazyForm"  style="width:150px;">
			<logic:present property="vo.product_type" name="lazyForm">
			<logic:equal value="1" property="vo.product_type" name="lazyForm">
			<html:optionsCollection property="books" name="lazyForm" label="bookname" value="id"/>
			</logic:equal>
			<logic:equal value="2" property="vo.product_type" name="lazyForm">
			<html:optionsCollection property="books" name="lazyForm" label="name" value="id"/>
			</logic:equal>
			</logic:present>
			</html:select>
			</td>
		</tr>		
	</table>
	</div>
	<div id="send">
		<input type="submit" name="save" id="save" value=" 儲存" />
		<input type="button" name="back" id="back" value="上一頁" onclick="history.go(-1);" />
	</div>
</form>
</body>
</html:html>